<template>
  <div id="vip">
    <div class="banner">
      <img src="../../../assets/vip_banner.png" alt>
    </div>
    <!-- 详情框 没有eoc的情况下 -->
    <div class="vip-details" v-if="!applyForStatus">
      <p>{{$t('vip.vipTitle1')}}</p>
      <p>{{$t('vip.vipTitle2')}}</p>
    </div>
    <!-- 有eoc余额的情况下 -->
    <div class="eoc-container" v-if="applyForStatus">
      <h5>{{$t("vip.yue")}}</h5>
      <p>{{eocDel}}</p>
    </div>
    <div class="vip-label">
      <h5 class="pt-vip">{{$t('vip.pt_vip')}}</h5>
      <p>{{$t('vip.pt_vipDetail')}}</p>
    </div>
    <div class="vip-label">
      <h5 class="pt-vip">{{$t('vip.zs_vip')}}</h5>
      <p>{{$t('vip.zs_vipDetail')}}</p>
    </div>
    <!-- 申请 -->
    <div class="applyFor" v-if="!applyForStatus">
      <h5>{{$t('vip.applyfor')}}</h5>
      <div class="applyFor-con">
        <button :class="{active:selected == 5000}" @click="selectBTN(5000)">5000</button>
        <button :class="{active:selected == 1000}" @click="selectBTN(1000)">1000</button>
      </div>
    </div>
    <!-- 取消申请 -->
    <div class="applyFor" v-if="applyForStatus">
      <h5>{{$t('vip.zsVips')}}</h5>
    </div>
    <div class="submit" v-if="!applyForStatus" @click="isShow = true">{{$t('vip.Submit')}}</div>
    <div class="submit" v-if="applyForStatus" @click="cancelApplyFor">{{$t('vip.cancel')}}</div>
    <!-- 弹窗 -->
    <div class="popup-layer" @click="closeLayer($event)" v-if="isShow">
      <div class="popup-container">
        <div class="popup-box">
          <h4 class="popup-title">{{$t("vip.walletPwd")}}</h4>
          <div>
            <input type="text" v-model="walletPwd" :placeholder="$t('vip.inputPwd')">
          </div>
          <div class="popupBtn">
            <button @click="submitPwd">
              <img src="../../../assets/ok_btn.png" alt>
            </button>
            <button @click="isShow = false">
              <img src="../../../assets/cancel_btn.png" alt>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { vipApply } from 'api'
export default {
  name: "vip",
  data() {
    return {
      selected: "5000",
      isShow: false,
      walletPwd: "",
      eocDel: 17563588,
      applyForStatus: false
    };
  },
  methods: {
    selectBTN(item) {
      this.selected = item;
    },
    closeLayer({ target: { className } }) {
      if (className == "popup-layer") {
        this.isShow = false;
      }
    },
    submitPwd() {
      this.isShow = false;
      console.log(this.selected);
      this.$post(vipApply, { num: this.selected }).then(res => {
        console.log(res);
      })
    },
    cancelApplyFor() {
      alert("取消申请");
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#vip
  width 100%
  background-color $vipBg
  padding-bottom rem(136)
  .banner
    width 100%
    img
      width 100%
  .vip-details
    border rem(1) solid $addressColor
    border-radius rem(5)
    width rem(302)
    height rem(64)
    margin 0 auto
    box-sizing border-box
    padding rem(11) rem(20)
    p
      color $fontColor
      font-size rem(15)
      font-weight bold
      line-height rem(20)
  .eoc-container
    h5, p
      font-size rem(15)
      color $fontColor
      font-weight bold
      line-height rem(20)
    p
      font-size rem(35)
      line-height rem(42)
  .vip-label
    text-align left
    margin-top rem(11)
    box-sizing border-box
    padding 0 rem(37) rem(21)
    h5
      font-size rem(13)
      color $typeColor
      line-height rem(20)
    p
      font-size rem(13)
      color $fontColor
      line-height rem(20)
  .applyFor
    padding-top rem(18)
    box-sizing border-box
    padding 0 rem(37) rem(21)
    h5
      color $typeColor
      font-size rem(15)
      line-height rem(20)
    .applyFor-con
      padding rem(18) 0 rem(42)
      display flex
      justify-content space-between
      button
        width rem(124)
        height rem(44)
        border rem(1) solid $tabBarActive
        color $fontColor
        font-size rem(15)
        border-radius rem(25)
      .active
        background-color $tabBarActive
  .submit
    width 80%
    margin 0 auto
    line-height rem(50)
    background-color $btnColor
    font-size rem(15)
    border-radius rem(25)
    color $fontColor
  .popup-layer
    position fixed
    top 0
    left 0
    bottom 0
    width 100%
    background-color $popupLayer
    z-index 10
    .popup-container
      width rem(346)
      height rem(201)
      positCenter(50%, 50%, auto, auto, -50%, -50%)
      border rem(1) solid $borderColor
      border-radius rem(10)
      box-sizing border-box
      padding rem(10) rem(8)
      background-color $layerBg
      .popup-box
        width 100%
        height 100%
        border-radius rem(10)
        background-color $listBg
        .popup-title
          padding rem(31) 0 0
          font-size rem(15)
          color $fontColor
        div
          box-sizing border-box
          padding 0 rem(35)
          margin-top rem(17)
          input
            display block
            width 100%
            height rem(35)
            box-sizing border-box
            padding rem(8) rem(15)
            background-color $inputBg
            border-radius rem(25)
            color $fontColor
            font-size rem(14)
        .popupBtn
          display flex
          justify-content space-between
          button
            width rem(124)
            height rem(44)
            img
              width 100%
              height 100%
              object-fit contain
</style>
